<template>
  <div style="margin-top: 200px">
    <el-result>
      <template #icon>
        <el-icon style="font-size: 64px; color: #f5222d"><warning /></el-icon>
      </template>
      <template #title>
        <span style="font-size: 40px; font-weight: 800">页面不存在</span>
      </template>
      <template #extra>
        <el-space :size="30">
          <el-button type="info" plain @click="onBack"> 返回 </el-button>
          <el-button type="primary" @click="onToHome"> 首页 </el-button>
        </el-space>
      </template>
    </el-result>
  </div>
</template>

<script lang="ts" setup>
  import { useRouter } from 'vue-router'

  const router = useRouter()

  const onBack = () => {
    router.back()
  }
  const onToHome = () => {
    router.replace('/')
  }
</script>
